テクスチャをCSSスプライトのように使う方法
前提
CSSスプライトのように複数の画像を並べたcanvas要素を使って効率よくテクスチャを作りたいです（そもそも「そんなことをしても効率化出来ない」ということであればその旨教えて下さい）。
記述その1
const texture = new THREE.CanvasTexture( canvas );
{
const geometry = new THREE.BoxGeometry( 50, 50, 50 );
const material = new THREE.MeshLambertMaterial({
map: texture
});
const mesh = new THREE.Mesh( geometry, material );
mesh.material.map.repeat.set( 0.5, 0.5 );
mesh.material.map.offset.set( 0.5, 0.5 );
mesh.position.set( -50, -50, 0 );
scene.add( mesh );
}
{
const geometry = new THREE.BoxGeometry( 50, 50, 50 );
const material = new THREE.MeshLambertMaterial({
map: texture
});
const mesh = new THREE.Mesh( geometry, material );
mesh.material.map.repeat.set( 0.5, 0.5 );
mesh.material.map.offset.set( 0, 0.5 );
mesh.position.set( 50, 50, 0 );
scene.add( mesh );
}
上記のように記述すると1つ目のmeshと2つ目のmeshが同じ絵で描かれてしまいました。texture情報を参照として保持しているのだろうと思います。
記述その2
const texture = new THREE.CanvasTexture( canvas );
{
const geometry = new THREE.BoxGeometry( 50, 50, 50 );
const material = new THREE.MeshLambertMaterial({
map: texture.clone()
});
const mesh = new THREE.Mesh( geometry, material );
mesh.material.map.repeat.set( 0.5, 0.5 );
mesh.material.map.offset.set( 0.5, 0.5 );
mesh.position.set( -50, -50, 0 );
scene.add( mesh );
}
{
const geometry = new THREE.BoxGeometry( 50, 50, 50 );
const material = new THREE.MeshLambertMaterial({
map: texture.clone()
});
const mesh = new THREE.Mesh( geometry, material );
mesh.material.map.repeat.set( 0.5, 0.5 );
mesh.material.map.offset.set( 0, 0.5 );
mesh.position.set( 50, 50, 0 );
scene.add( mesh );
}
texture.clone()で結果として期待通りの絵は描かれました。
考察
texture.clone()はテクスチャをコピーしているのだと思いますが、これだとそもそもcanvasに複数の画像を含めるよりも、それぞれ別のcanvasを作ってtextureに割り当てるのと変わらないのでは？、と考えました。
知りたいこと
記述その2の書き方（texture.clone()）で描くよりも、使用メモリが少なかったり、プログラム的に軽量な記述方法があれば知りたいです。
スライドパズル（15パズル）の元絵があって、元絵を分割せず各コマに貼り付けるイメージです。
どうぞよろしくお願いします。
0 likes